<template>
	<el-form ref="loginFormRef" :model="loginForm" :rules="loginRules" @keyup.enter="onLogin">
		<div class="login-title">{{ $t('app.logoText') }}</div>
		<el-form-item prop="username">
			<el-input v-model="loginForm.username" :prefix-icon="User" :placeholder="$t('app.username')"></el-input>
		</el-form-item>
		<el-form-item prop="password">
			<el-input v-model="loginForm.password" :prefix-icon="Lock" show-password :placeholder="$t('app.password')"></el-input>
		</el-form-item>
		<el-form-item prop="captcha" class="login-captcha">
			<el-input v-model="loginForm.captcha" :placeholder="$t('app.captcha')" :prefix-icon="Key"></el-input>
			<img :src="captchaBase64" @click="onCaptcha" />
		</el-form-item>
		<el-form-item class="login-button">
			<el-button type="primary" @click="onLogin()">{{ $t('app.signIn') }}</el-button>
		</el-form-item>
	</el-form>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { User, Lock, Key } from '@element-plus/icons-vue'
import store from '@/store'
import { useCaptchaApi } from '@/api/auth'
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { useUserListApi } from '@/api/sys/user'
import { useOrderListApi } from '@/api/sys/order'
import { useProjectListApi } from '@/api/sys/project'
import { useCustomerListApi } from '@/api/sys/customer'
import {getCustomerApi} from '@/api/sys/customer'
import constant from '@/utils/constant'

const router = useRouter()
const { t } = useI18n()
const loginFormRef = ref()
const captchaBase64 = ref()

const loginForm = reactive({
	username: '',
	password: '',
	key: '',
	captcha: ''
})

const loginRules = ref({
	username: [{ required: true, message: t('required'), trigger: 'blur' }],
	password: [{ required: true, message: t('required'), trigger: 'blur' }],
	captcha: [{ required: true, message: t('required'), trigger: 'blur' }]
})

onMounted(() => {
	onCaptcha();
	// getUserCount('高中');
	// getUserCount('专科');
	// getUserCount('本科');
	// getUserCount('研究生');
	// getUserCount('博士生');
	// getUserAll();
})

const onCaptcha = async () => {
	const { data } = await useCaptchaApi()
	loginForm.key = data.key
	captchaBase64.value = data.image
}
// 获取信息
const getUserCount = (eduname:any) => {
	let param={page:1,limit:1,levelEdu:eduname}
	useUserListApi(param).then(res => {
		if(eduname=="高中"){
			localStorage.setItem('data1',res.data.length);
		}if(eduname=="专科"){
			localStorage.setItem('data2',res.data.length);
		}if(eduname=="本科"){
			localStorage.setItem('data3',res.data.length);
		}if(eduname=="研究生"){
			localStorage.setItem('data4',res.data.length);
		}if(eduname=="博士生"){
			localStorage.setItem('data5',res.data.length);
		}
	})
}
const getUserAll = () => {
	let param={page:1,limit:1}
	useUserListApi(param).then(res => {
		localStorage.setItem('data13',res.data.length);
	})
}
const getProjectAll = () => {
	let param={page:1,limit:1}
	useProjectListApi(param).then(res => {
		localStorage.setItem('data14',res.data.length);
	})
}
const getOrderAll = () => {
	let param={page:1,limit:1}
	useOrderListApi(param).then(res => {
		localStorage.setItem('data15',res.data.length);
	})
}
const getCustomerAll = () => {
	let param={page:1,limit:1,deleted:0}
	useCustomerListApi(param).then(res => {
		localStorage.setItem('data16',res.data.length);
	})
}
const getCustomer = (currentYear:any) => {
	let param={currentYear:currentYear,page:1,limit:12,deleted:0}
	getCustomerApi(param).then(res => {
		let datalist=res.data.list;
		console.log(datalist);
		for(let index=0;index<datalist.length;index++){
			if(datalist[index].currentTime==currentYear+'-01'){
				localStorage.setItem('data1',datalist[index].customerCount);
			}
			if(datalist[index].currentTime==currentYear+'-02'){
				localStorage.setItem('data2',datalist[index].customerCount);
				
			}
			if(datalist[index].currentTime==currentYear+'-03'){
				localStorage.setItem('data3',datalist[index].customerCount);
				
			}
			if(datalist[index].currentTime==currentYear+'-04'){
				localStorage.setItem('data4',datalist[index].customerCount);
				
			}
			if(datalist[index].currentTime==currentYear+'-05'){
				localStorage.setItem('data5',datalist[index].customerCount);
				
			}
			if(datalist[index].currentTime==currentYear+'-06'){
				localStorage.setItem('data6',datalist[index].customerCount);
				
			}
			if(datalist[index].currentTime==currentYear+'-07'){
				localStorage.setItem('data7',datalist[index].customerCount);
				
			}
			if(datalist[index].currentTime==currentYear+'-08'){
				
				localStorage.setItem('data8',datalist[index].customerCount);
			}
			if(datalist[index].currentTime==currentYear+'-09'){
				localStorage.setItem('data9',datalist[index].customerCount);
				
			}
			if(datalist[index].currentTime==currentYear+'-10'){
				localStorage.setItem('data10',datalist[index].customerCount);
				
			}
			if(datalist[index].currentTime==currentYear+'-11'){
				localStorage.setItem('data11',datalist[index].customerCount);
			}
			if(datalist[index].currentTime==currentYear+'-12'){
				localStorage.setItem('data12',datalist[index].customerCount);
			}
		}
	})
}
const onLogin = () => {
	loginFormRef.value.validate((valid: boolean) => {
		if (!valid) {
			return false
		}

		// 用户登录
		store.userStore
			.accountLoginAction(loginForm)
			.then((response:any) => {
				localStorage.setItem('orgId',response.orgId);
				localStorage.setItem('userId',response.userId);
				localStorage.setItem('userCd',response.uid);
				localStorage.setItem('realName',response.realName);
				localStorage.setItem('org',response.org);
							
				let year = new Date().getFullYear();
				getCustomer(year);
				getUserAll();
				getCustomerAll();
				getOrderAll();
				getProjectAll();
				router.push({ path: '/home' })
			})
			.catch(() => {
				onCaptcha()
			})
	})
}
</script>

<style lang="scss" scoped>
.login-title {
	display: flex;
	justify-content: center;
	margin-bottom: 35px;
	font-size: 24px;
	color: #444;
	letter-spacing: 4px;
}
.login-captcha {
	:deep(.el-input) {
		width: 200px;
	}
}
.login-captcha img {
	width: 150px;
	height: 40px;
	margin: 5px 0 0 10px;
	cursor: pointer;
}
.login-button {
	:deep(.el-button--primary) {
		margin-top: 10px;
		width: 100%;
		height: 45px;
		font-size: 18px;
		letter-spacing: 8px;
	}
}
</style>
